<template>
<div class="background">
  <div class="my" >
    <div class="myinfo">
      <img :src="userInfo.avatarUrl" alt="" class="userinfo">
      <div>
        <p>{{userInfo.nickName}}</p>
        <p>分数：{{rank}}</p>
        <p>城市: {{userInfo.province}}</p>
     </div>
    </div>
  </div>

  <div v-if="!ismatching" @click="startMatch" class="matchbattle">
    <div style="letter-spacing:8px;">匹配对战</div>
  </div>
  <div v-else  @click="cancelMatch" class="matchbattle">
    <div style="letter-spacing:8px;font-weirht:bold">匹配中<div class="weui-loading"></div></div>
  </div>
  <div class="friendbattle" @click="jmpToMatchWithFriend">
    <div style="letter-spacing:8px;font-weirht:bold">好友对战</div>
  </div>
  <div class="rankalist">
    <div class="rank" @click="jmpToLeaderboard">
      <p>排<br>行<br>榜</p>
    </div>
    <div class="friendlist" @click="jmpToFriendList">
      <p>好<br>友<br>列<br>表</p>
    </div>
    <div class="user" @click="jmpToUser">
      <p>用<br>户<br>中<br>心</p>
    </div>  
  </div>
  <div class="weui-footer weui-footer_fixed-bottom">
    <div class="weui-footer__text">2019答题对战小组巅峰之作</div>
  </div>
</div>
</template>

<script>
import store from '../../utils/store'
import httpkit from '../../utils/http-kit'
export default {
  data () {
    return {
      userInfo: store.state.userInfo,
      rank: store.state.score,
      ismatching: false
    }
  },
  onLoad () { // 清空数据重新加载
    Object.assign(this.$data, this.$options.data())
  },
  components: {},
  mounted () {
    this.userInfo = store.state.userInfo
    this.rank = store.state.score
    this.userInfo = store.state.userInfo
  },
  methods: {
    // 取消匹配
    cancelMatch () {
      if (this.ismatching) {
        httpkit.get('/match/cancel', {
          id: store.state.userid
        }).then(res => {
          console.log('取消匹配成功')
        })
      }
      this.ismatching = false
    },
    // 开始匹配
    startMatch () {
      store.commit('resetRivalInfo', null)
      if (!this.ismatching) {
        httpkit.get('/match/start', {
          id: store.state.userid
        }).then(res => {
          console.log('匹配中')
          if (!res.data) {
            wx.showToast({
              title: '比赛已在进行中',
              mask: false,
              icon: 'loading',
              duration: 2000
            })
          } else {
            this.ismatching = true
          }
        })
      } else {
        this.ismatching = false
      }
    },
    jmpToUser () { // 各种跳转方法
      this.cancelMatch()
      store.commit('changeRivalid', store.state.userid)
      wx.navigateTo({
        url: '../user/main'
      })
    },
    jmpToMatchWithFriend () {
      this.cancelMatch()
      store.commit('resetRivalInfo', null)
      httpkit.get('/match/create', {
        id: store.state.userid
      }).then(res => { // todo可能要修改
        console.log(res.data)
        store.commit('changeRoomid', res.data)
      })
      wx.navigateTo({
        url: '../room/main'})
    },
    jmpToFriendList () {
      this.cancelMatch()
      wx.navigateTo({
        url: '../friendList/main'})
    },
    jmpToLeaderboard () {
      this.cancelMatch()
      wx.navigateTo({
        url: '../leaderboard/main'})
    }
  },
  taphandle () { // 右上角分享
    wx.showActionSheet({
      itemList: [
        '分享给好友'
      ]
    })
  },
  onShareAppMessage: function (ops) { // 分享按钮的回调
    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops.target)
    }
    return {
      title: '好友邀请你参加答题对战', // 这里是定义转发的标题
      path: '/pages/login/main?roomId=666&&rivalId=sb', // 这里是定义转发的地址
      desc: '我是全世界最帅的程序猿',
      success: function (res) {
        // 转发成功
        console.log(this.path)
        console.log('转发成功:' + JSON.stringify(res))
      },
      fail: function (res) {
        // 转发失败
        console.log('转发失败:' + JSON.stringify(res))
      }
    }
  }

}
</script>


<style lang='scss' scoped>
   @import "./style";
.background {
  display: flex;
  flex-direction: column;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563882083988&di=e0087b5c5f38c827e86919902c8e58a5&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201508%2F02%2F20150802081803_5sheU.jpeg);
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.matchbattle{
  display: flex;
  width: 80%;
  height: 13%;
  color: #ffffff;
  font-size: 25px;
  align-items: center;
  margin-left: 8%;
  margin-top: 8%;
  border-radius: 15px;
  justify-content: center;
  letter-spacing:3px;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563883180819&di=d9363ffe2d08ede22877617589cfa43a&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F07%2F20190107235841_wfjbl.jpg);
	background-repeat:no-repeat;
  background-position:top;
  font-weight:bold;

}
.friendbattle{
  display: flex;
  width: 80%;
  height: 13%;
  color: #ffffff;
  font-size: 25px;
  align-items: center;
  margin-left: 8%;
  margin-top: 4%;
  border-radius: 15px;
  justify-content: center;
  letter-spacing:3px;
  background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3534338575,3066859768&fm=26&gp=0.jpg);
  background-position:center;
  font-weight:bold;

}
.rankalist {
  display: flex;
  align-items: center;
  width: 100%;
  height: 16%;
  margin-top:6%;
  letter-spacing:3px;
}
.rank{
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23%;
  height: 100%;
  margin-left: 8%;
  border-radius: 10%;
  line-height: 160%;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563883149009&di=1b9b72ce3a3509df6f65e70ca9a19240&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb344e9e769cefa35966772e0a45b196b680b3afc3d7ae-soCDVP_fw658);
  background-repeat:no-repeat;
  background-position:left;
  font-weight:bold;
}
.friendlist{
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23%;
  height: 100%;
  margin-left: 5%;
  border-radius: 10%;
  line-height: 110%;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563883149009&di=1b9b72ce3a3509df6f65e70ca9a19240&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb344e9e769cefa35966772e0a45b196b680b3afc3d7ae-soCDVP_fw658);
  background-repeat:no-repeat;
  background-position: top;
  font-weight:bold;

}
.user {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 23%;
  height: 100%;
  line-height: 110%;
  margin-left: 5%;
  border-radius: 10%;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563883149009&di=1b9b72ce3a3509df6f65e70ca9a19240&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb344e9e769cefa35966772e0a45b196b680b3afc3d7ae-soCDVP_fw658);
  background-repeat:no-repeat;
  background-position:right;
  font-weight:bold;
}
.weui-footer__text {
  font-size: 15px;
  color: rgb(247, 243, 243);
}
</style>
